<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comment类型</title>
</head>
<body>
  <div id="app"><!--hello comment--></div>
  <div id="content"></div>
</body>
<script>
  /** 1.DOM 中的注释通过 Comment 类型表示。Comment 类型的节点具有以下特征
   *    +nodeType 等于 8；
   *    +nodeName 值为"#comment";
   *    +nodeValue 值为注释的内容；
   *    +parentNode 值为 Document 或 Element 对象;
   *    +不支持子节点。
   * 2.Comment 类型与 Text 类型继承同一个基类（CharacterData），因此拥有除 splitText()之外 Text 节点所有的字符串操作
   *   方法。与 Text 类型相似，注释的实际内容可以通过 nodeValue 或 data属性获得。
   * 3.注释节点可以作为父节点的子节点来访问。
   * 4.可以使用 document.createComment()方法创建注释节点，参数为注释文本;
   * 5.显然，注释节点很少通过 JavaScrpit 创建和访问，因为注释几乎不涉及算法逻辑。此外，浏览器不承认结束的</html>标签之后的
   *   注释。如果要访问注释节点，则必须确定它们是<html>元素的后代
   * **/
   function checkComment(){
     //1.获取注释节点父元素
     let father = document.getElementById('app');
     let comment = father.firstChild
     console.log(comment.nodeType);
     console.log(comment.nodeName);
     console.log(comment.nodeValue);
     console.log(comment.parentNode === father);
     let content = document.getElementById('content');
     let str = document.createComment('hello comment!!!!');
     content.appendChild(str);
   }
   checkComment();
</script>
</html>